<template>
  <div>
    <video
      ref="videoElement"
      :src="videoSrc"
      :controls="true"
      :autoplay="autoplay"
      :loop="loop"
      :muted="muted"
      :width="videoWidth"
      :height="videoHeight"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      @timeupdate="onTimeUpdate"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'http://49.234.45.35:10000/images/404.mp4', // 视频文件路径
      autoplay: false, // 是否自动播放
      loop: false, // 是否循环播放
      muted: false, // 是否静音播放
      videoWidth: '100%', // 视频宽度
      videoHeight: '100%', // 视频高度
      videoElement: null // 对video元素的引用
    }
  },
  mounted() {
    this.videoElement = this.$refs.videoElement
  },
  methods: {
    playVideo() {
      if (this.videoElement) {
        this.videoElement.play()
      }
    },
    pauseVideo() {
      if (this.videoElement) {
        this.videoElement.pause()
      }
    },
    seekTo(seconds) {
      if (this.videoElement) {
        this.videoElement.currentTime = seconds
      }
    },
    onPlay() {
      console.log('视频播放开始')
    },
    onPause() {
      console.log('视频播放暂停')
    },
    onEnded() {
      console.log('视频播放结束')
      // 可以在这里添加视频播放结束后的逻辑
    },
    onTimeUpdate() {
      console.log('当前播放时间：', this.videoElement.currentTime)
      // 可以在这里添加时间更新的逻辑
    }
  }
}
</script>
